<style scoped lang="scss">
header {
  width: 100%;
  height: 50px;
}

.box {
  width: 100vw;
  height: 100vh;
  background: linear-gradient(to bottom, #4fc08d, #fff);
}

.content {
  margin: 10px 20px;
  display: flex;

  img {
    margin-right: 10px;
    width: 20px;
    height: 20px;
  }

  h2 {
    color: #fff;
  }
}

p {
  margin: 10px 50px;
  color: #fff;
}

.c1 {
  width: 90%;
  height: 600px;
  margin: 20px;
  border-radius: 10px;
  padding: 10px;
  background: #fff;

  h2 {
    width: 100%;
    height: 40px;
  }
}

footer {
  width: 100%;
  padding: 10px;
  position: fixed;
  bottom: 0;
  display: flex;
  justify-content: space-around;
}

.c2 {
  width: 90%;
  height: 200px;
  margin: 20px;
  border-radius: 10px;
  padding: 10px;
  background: #fff;
  font-size: 18px;

  h2 {
    width: 100%;
    height: 40px;
  }
}

.addrss {
  display: flex;
  flex-wrap: wrap;

  div {
    text-align: center;
    align-content: center;
    margin: 14px;
    width: 150px;
    height: 40px;
    background: #ccc;
    border-radius: 10px;
  }
}

.active {
  color: #00be8c;
}
</style>

<template>
  <div class="box">
    <header>
      <van-nav-bar left-arrow @click-left="$router.back()" title="预约成功" />
    </header>
    <div class="content">
      <img src="../../assets/对钩.png" alt="" />
      <h2>预约成功,待就诊</h2>
    </div>
    <p v-if="v">就诊地址:{{ v[0].doctorcity }}</p>

    <div class="c1" v-if="v">
      <h2>就诊信息</h2>
      <van-cell-group inset>
        <van-field label="就诊时间" :model-value="currentTime" readonly />
        <van-field label="就诊医院" :model-value="v[0].nosocomium" readonly />
        <van-field label="就诊科室" :model-value="v[0].doctoradministre" readonly />
        <van-field label="医生姓名" :model-value="v[0].doctorname" readonly />
        <van-field label="医生职称" :model-value="v[0].doctorstate" readonly />
        <van-field label="出诊类型" model-value="普通门诊" readonly />
        <van-field label="挂号费用" :model-value="v[0].doctorprice" readonly />
        <van-field label="挂号单号" :model-value="v[0].doctoriddoc" readonly />
        <van-field label="挂号时间" :model-value="currentTime" readonly />
        <van-field label="就诊人" :model-value="contacts" readonly />
        <van-field label="身份证号" model-value="*********" readonly />
      </van-cell-group>
    </div>
    <div class="c2">
      <h2>预约须知</h2>
      先预约挂号,后到院就诊
    </div>
  </div>

  <footer>
    <van-button plain type="success" round style="width: 150px" @click="showPopup">取消预约</van-button>
    <van-button plain type="success" round style="width: 150px" @click="$router.push('/reservation')">回首页</van-button>
  </footer>

  <van-popup v-model:show="show" closeable round position="bottom" :style="{ height: '70%' }">
    <h1 style="text-align: center">取消订单</h1>
    <h2>用户须知</h2>
    <div style="font-size: 16px">
      1.一个挂号一周内累计取消3次,平台将自动暂停账号未来7天预约挂号服务
    </div>
    <div style="font-size: 16px">
      2.若为医院医生无法就诊,可取消订单后进行申诉
    </div>
    <h2>请先选择取消原因</h2>
    <div class="addrss">
      <div v-for="(v, i) in list" :class="{ active: currentIndex === i }" @click="onTab(v, i)">
        {{ v }}
      </div>
    </div>
    <div style="display: flex; justify-content: space-around">
      <van-button plain type="success" round style="width: 150px" @click="showPopup1">确定取消</van-button>
      <van-button type="success" round style="width: 150px" @click="show = false">暂不取消</van-button>
    </div>
  </van-popup>

  <van-popup v-model:show="onShow" :style="{ padding: '20px' }" round>
    此医院的退号时间为“12:00”,或请工作时间到医院窗口办理退号
  </van-popup>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { useRoute } from 'vue-router'
import axios from 'axios'
import { showNotify } from 'vant'
// 北京时间
const currentTime = ref<any>(new Date().toLocaleString())
const route = useRoute()
const id = route.params.id
const v = ref()
const yy = ref()
const currentIndex = ref(0)
const getDetailData = async () => {
  const res = await axios.get('/api/doctor/detail', { params: { id: id } })
  v.value = res.data.data
  console.log(v.value)
  yy.value = res.data.data[0]
}
getDetailData()
const show = ref(false)
const onShow = ref(false)
const showPopup = () => {
  show.value = true
  showNotify('通知内容')
}
const showPopup1 = () => {
  show.value = true
  onShow.value = true
  showNotify('')
}

const list = ref([
  '时间冲突',
  '信息填写有误',
  '预约多个订单',
  '对医生不了解',
  '医生临时停诊',
  '对医院不了解',
  '选错科室',
  '其他',
])

const onTab = (v: string, i: number) => {
  currentIndex.value = i
}
const contacts = ref<string>(
  JSON.parse(localStorage.getItem('contacts') || '[]'),
)

// const beijingTime = ref('');

// const updateBeijingTime=()=> {
//   const now = new Date();
//   // 设置时区偏移量为东八区（北京时间）
//   const timeZoneOffset = -8;
//   const timezoneOffsetHours = timeZoneOffset * 60;
//   const beijingDate = new Date(now.getTime() + timezoneOffsetHours * 60 * 1000);
//   beijingTime.value = beijingDate.toLocaleString();
// }

// onMounted(() => {
//   updateBeijingTime();
//   // 每隔一分钟更新一次北京时间
//   setInterval(updateBeijingTime, 60 * 1000);
// });

// onUnmounted(() => {
//   // 清除定时器
//   clearInterval(updateBeijingTime);
// });
</script>
